<!DOCTYPE html>
<html lang="zh-CN" xml:th="https://www.thymeleaf.org/">
<head>
      <meta charset="UTF-8">
      <title>用户列表</title>
      <style>
        /* 表格基础样式 */
        .modern-table {
               width: 100%;
               border-collapse: collapse;
               margin: 20px 0;
               font-family: 'Arial', sans-serif;
               font-size: 14px;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
              border-radius: 8px;
              overflow: hidden;
              }
         /* 表头样式 */
        .modern-table thead th {
               background-color: #4285f4;
               color: white;
               text-align: left;
               padding: 14px 18px;
               font-weight: 600;
               text-transform: uppercase;
               letter-spacing: 0.5px;
              }
        /* 表格内容样式 */
        .modern-table tbody td {
               padding: 14px 18px;
               color: #333;
               border-bottom: 1px solid #f0f0f0;
              }
        /* 行 hover 效果 */
        .modern-table tbody tr:hover {
               background-color: #f8f9fa;
               cursor: default;
              }
        /* 交替行颜色 */
        .modern-table tbody tr:nth-child(even) {
               background-color: #fafbfc;
              }
        /* 响应式调整 */
        @media (max-width: 768px) {
               .modern-table thead {
                      display: none;
                    }
              .modern-table tbody, .modern-table tr, .modern-table td {
                    display: block;
                     width: 100%;
                     }
              .modern-table tr {
                      margin-bottom: 15px;
                      border: 1px solid #f0f0f0;
                      border-radius: 8px;
                     }
               .modern-table td {
                     text-align: right;
                     padding-left: 50%;
                      position: relative;
                    }
            .modern-table td::before {
                 content: attr(data-label);
                 position: absolute;
                 left: 0;
                 width: 50%;
                 padding-left: 18px;
                 font-weight: 600;
                 text-align: left;
                  }
               }
       </style>
</head>
<body>
<table class="modern-table">
     <thead>
<tr>
     <th>序号</th>
     <th>用户编号</th>
     <th>用户姓名</th>
     <th>电话号码</th>
     <th>用户地址</th>
     </tr>
</thead>
     <tbody>
<tr th:each="user,itr:${users}">
     <td data-label="序号" th:text="${itr.count}"></td>
     <td data-label="用户id" th:text="${user.id}"></td>
     <td data-label="用户姓名" th:text="${user.username}"></td>
    <td data-label="电话号码" th:text="${user.phone}"></td>
     <td data-label="用户地址" th:text="${user.address}"></td>
     </tr>

</tbody>
</table>
</body>
</html>
